<template>
    <!-- <a-modal centered v-model="visible" :footer="null" :closable="false">> -->
        <form @submit.prevent="() => { return false; }" class="fav-component">
            <div class="fav-header">
                {{form.id?'编辑':'新建'}}{{ folderTypeEnum[foldertype] }} <a class="close-win" @click="$emit('close',false)"></a>
            </div>
            <div class="create-form">
                <input type="text" v-model="form.title" placeholder="收藏夹名称（必填），不能超过60个字符" maxlength="60">
                <div class="textarea-control">
                    <textarea v-model="form.content" maxlength="200" placeholder="图集介绍描述（必填）"></textarea>
                    <i>{{ 200 - form.content.length }}</i>
                </div>
            </div>
            <div class="btns">
                <a class="pro-default-btn" @click="$emit('close',false)">取消</a>
                <a class="pro-confirm-btn" @click="handleCreate">确认</a>
            </div>
        </form>
        <!-- <div class="modal-mask" @click="handleClose">

        </div> -->
    <!-- </a-modal> -->
</template>

<script>
import api from '@/api/api'
export default {
    data() {
        return {
            visible:false,
            folderTypeEnum: {
                1: '图片集收藏夹',
                0: '单图收藏夹',
                2: '短视频收藏夹'
            },
            form: {
                title: '',
                content: ''
            }
        }
    },
    destroyed() {
        // document.body.style.overflow = 'inherit';
    },
    props: ['foldertype', 'info'],
    methods: {
        handleClose() {
            this.$emit('close', false)
        },
        async handleCreate() {
            let res = {};

            let _type=parseInt(this.foldertype);
            if (!this.form.title) {
                return;
            }
            if (this.form.id) {
                if (_type === 1) {
                    res = await api.editArticleFolder(this.form);
                } else if (_type === 0) {
                    res = await api.editExplorer(this.form);
                }
                if (res.code == 0) {
                    this.form = { content: '' };
                    this.$amessage.success('修改成功')
                    this.$emit('close', true)
                }
            }
            else {
                if (_type === 1) {
                    res = await api.createFavorites(this.form);
                } else if (_type === 0) {
                    res = await api.createSinglePicFav(this.form);
                } else if (_type === 2) {
                    res = await api.createVideoFolder(this.form);
                }
                
                if (res.code == 0) {
                    this.form = { content: '' };
                    this.$amessage.success('创建成功')
                    this.$emit('close', true)
                }
            }
        }
    },
    mounted() {
        if (this.info&&this.info.id) {
            this.form = Object.assign({}, { id: this.info.id, title: this.info.title, content: this.info.content?this.info.content:'' });
        } else {
            this.form = {
                title: '',
                content: ''
            }
        }
        // document.body.style.overflow = 'hidden';
    }
}
</script>

<style scoped lang="less">
// .fav-component{
//     position:fixed;
//     width:471px;
//     border-radius:30px;
//     background:#1C1C1E;
//     box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
//     z-index:104;
//     top:30%;
//     left:calc((100% - 471px) / 2);
//     padding:26px 29px;
//     .fav-header{
//         font-size:16px;
//         font-weight:500;
//         text-align: center;
//         position: relative;
//         line-height:22px;
//         .close-win{
//             width:20px;
//             height:20px;
//             background:url('../assets/pro/close_default.svg') no-repeat;
//             background-size:cover;
//             position: absolute;
//             top:0px;
//             transition:.2s all linear;
//             z-index:102;
//             right:0px;
//             &:hover{
//                 background:url('../assets/pro/close_modal_page.svg') no-repeat;
//                 background-size:cover;
//             }
//         }
//     }
//     .create-form{
//         font-size:14px;
//         input{
//             line-height:50px;
//             border-radius:8px;
//             padding:0px 24px 0px 17px;
//             background:#171719;
//             border:none;
//             color:#fff;
//             margin-top:20px;
//             width:100%;
//         }
//         .textarea-control{
//             position: relative;
//             i{
//                 font-style: normal;
//                 position: absolute;
//                 right:13px;
//                 bottom:8px;
//                 font-size:12px;
//                 color:#969696;
//             }
//         }
//         textarea{
//             padding:13px 24px 0px 17px;
//             height:110px;
//             border-radius:8px;
//             color:#fff;
//             resize: none;
//             width:100%;
//             background:#171719;
//             margin-top:20px;
//             border:none;
//         }
//     }
//     .btns{
//         display: flex;
//         align-items: center;
//         justify-content: space-between;
//         margin-top:30px;
//         width:100%;
//         color:#fff;
//         font-size:16px;
//         line-height:40px;
//         user-select: none;
//         .pro-default-btn{
//             width:170px;
//             text-align:center;
//             background:#37363E;
//             border-radius:8px;
//         }
//         .pro-confirm-btn{
//             width:170px;
//             text-align:center;
//             background:#11CCB1;
//             border-radius:8px;
//         }
//     }
// }</style>